// import React, { Component } from 'react'

// es5 React.createClass({})
// es6 组件写法
// export default class Header extends Component {
//     render () {
//         let res = 'hello';
//         res += 'world';
//         return (
            // <div className="container">
            //     <div className="row">
            //         <div className="col-xs-1 col-xs-offset-11">
            //             <h1>Header</h1>
            //             { '这是头部信息' }
            //             { true ?'hello':'React.js' }
            //             { res }
            //         </div>
            //     </div>
            // </div>
//         );
//     }
// }
// 无状态的函数写法 也叫纯组件写法
import React from 'react'
const Header = (props) => {
    // 高阶组件 hoc
    // return class Header extends Component {}
    return (
        <div className="container">
            <div className="row">
                <div className="col-xs-1 col-xs-offset-11">
                    <h1>Header</h1>
                    {'这是头部信息'}
                    {true ? 'hello' : 'React.js'}
                    {'Age is :'}{props.age}
                </div>
                <div className="h1">
                    信息:{props.infor}
                </div>
            </div>
        </div>
    );
}
export default Header;
// 无状态组件的好处
/* 1.无需state  即不处理用户的输入，组件的所有的数据都是依赖props 传入的
2.不需要用到声明周期函数

3.不需要声明类，可以避免大量的使用extends 或者constructor 
4.不需要声明this关键字，在ES6中类声明中往往需要将this 进行bind 才能使用
*/